<template>
  <a-layout style="min-height: 100vh; overflow: hidden">
    <!-- 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" collapsible :trigger="null">
      <div class="logo">
        <img
          v-if="!collapsed"
          src="@/assets/logo.png"
          alt="Logo"
          style="height: 32px"
        />
        <span
          v-if="!collapsed"
          style="margin-left: 8px; font-size: 18px; font-weight: bold"
          >管理系统</span
        >
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        :inline-collapsed="collapsed"
      >
        <a-menu-item key="dashboard">
          <template #icon>
            <dashboard-outlined />
          </template>
          <router-link to="/dashboard">仪表盘</router-link>
        </a-menu-item>
        <a-menu-item key="users">
          <template #icon>
            <user-outlined />
          </template>
          <router-link to="/users">用户管理</router-link>
        </a-menu-item>
        <a-menu-item key="dishes">
          <template #icon>
            <setting-outlined />
          </template>
          <router-link to="/dishes">菜品管理</router-link>
        </a-menu-item>
        <!-- 添加会员管理导航链接 -->
        <a-menu-item key="members">
          <template #icon>
            <!-- 可以选择合适的图标 -->
            <setting-outlined />
          </template>
          <router-link to="/members">会员管理</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 右侧布局 -->
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header
        style="
          background: #fff;
          padding: 0 16px;
          display: flex;
          align-items: center;
        "
      >
        <a-button type="link" @click="toggleCollapsed">
          <menu-unfold-outlined v-if="collapsed" />
          <menu-fold-outlined v-else />
        </a-button>
        <div style="flex: 1"></div>
        <a-dropdown>
          <a-avatar style="background-color: #87d068">Admin</a-avatar>
          <template #overlay>
            <a-menu>
              <a-menu-item key="profile">个人中心</a-menu-item>
              <a-menu-item key="logout">退出登录</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content style="margin: 10px 10px 0 10px">
        <router-view />
      </a-layout-content>

      <!-- 底部 -->
      <!-- <a-layout-footer style="text-align: center">
        Ant Design Vue © 2023
      </a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>

<script>
import { ref } from "vue";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DashboardOutlined,
  UserOutlined,
  SettingOutlined,
  UserGroupOutlined, // 引入新图标
} from "@ant-design/icons-vue";

export default {
  components: {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    DashboardOutlined,
    UserOutlined,
    SettingOutlined,
    UserGroupOutlined, // 注册新图标组件
  },
  setup() {
    const collapsed = ref(false);
    const selectedKeys = ref(["dashboard"]);

    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };

    return {
      collapsed,
      selectedKeys,
      toggleCollapsed,
    };
  },
};
</script>

<style scoped>
.logo {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.ant-layout-sider {
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

.ant-menu-dark .ant-menu-item-selected {
  background-color: #1890ff !important;
}

.ant-menu-dark .ant-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.ant-layout-header {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>
